<template>
  <div>
    <!-- <h2>购物车</h2> -->
    <!-- 顶部提示 -->
    <Tips></Tips>

    <!-- 购物车列表 -->
    <van-checkbox-group
      v-model="result"
      :disabled="isEditing"
    >
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="changeChecked(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.market_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="stepperChange(item)"
          />
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="delGood(item)"
            />
          </template>
        </van-swipe-cell>

      </van-checkbox>
    </van-checkbox-group>

    <!-- 底部提交 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount*100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="checkedAll"
        :disabled="isEditing"
      >全选</van-checkbox>
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span>件商品，可点击 <van-button
          @click="isShowStep"
          :type="!isEditing ? 'primary' : 'danger'"
          size="small"
        >{{!isEditing ? '编辑' : '完成编辑'}}</van-button> 按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue";
import {
  GetCartData,
  ChangeGoodsChecked,
  StepperChange,
  DelGood,
} from "@/request/api.js";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      // 展示选中的元素的数组
      // 哪一个商品的 checked 为 1 就把他添加到这个数组
      result: [],
      // checkedAll: false,
      // 购物车数据
      cartList: [],
      // 购物车底部总价
      cartTotal: [],
      // 编辑状态的设置
      isEditing: false,
    };
  },
  computed: {
    checkedAll: {
      get() {
        // return this.result.length == this.cartList.length ? true : false;
        return this.result.length == this.cartList.length;
      },
      set(val) {
        console.log("-------set被执行了----------", val);

        // 处理id数组
        let ids_arr = [];
        this.cartList.map((item) => {
          ids_arr.push(item.product_id);
        });

        ChangeGoodsChecked({
          isChecked: val ? 1 : 0,
          productIds: ids_arr.join(),
        }).then((res) => {
          if (res.errno == 0) {
            console.log("res", res);
            this.totalFn(res.data);
          }
        });
      },
    },
  },
  created() {
    GetCartData().then((res) => {
      if (res.errno == 0) {
        // console.log("res", res);
        this.totalFn(res.data);
      }
    });
  },
  methods: {
    totalFn(data) {
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;
      // 清空一下 this.result 数组  后面的操作不会使这个数组越来越长
      this.result = [];
      this.cartList.map((item) => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    isShowStep() {
      this.isEditing = !this.isEditing;
    },
    onSubmit() {},
    onClickEditAddress() {},
    changeChecked(item) {
      if (this.isEditing) return;
      //
      // 总结：为什么要发送这个请求  这个请求的作用
      //  这个请求用来告诉后端 我们改了哪些值 后端接收到之后
      // 返回给我们一个处理过后的完整的页面数据 （包括总价的计算）
      //  我们只需要拿到这个数据  往页面上填就好 （修改 cartList 和 cartTotal ）
      //
      ChangeGoodsChecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          console.log("res", res);
          this.totalFn(res.data);
        }
      });
    },
    stepperChange(item) {
      console.log("item", item);
      StepperChange({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          console.log("res", res);
          this.totalFn(res.data);
        }
      });
    },
    delGood(item) {
      DelGood({
        productIds: item.product_id.toString(),
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 9.3rem;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 0.6rem 0.66rem;
  }
}
.van-submit-bar {
  bottom: 3.1rem;
  border-bottom: 1px solid #ccc;
}
.van-stepper {
  text-align: right;
}
.van-button--square {
  height: 100%;
}
</style>